<div ng-if="!ctrl.error && !(ctrl.binding | isBindingFailed)">
  <div ng-if="ctrl.binding && !(ctrl.binding | isBindingReady)" class="results-status">
    <span class="fa fa-clock-o text-muted" aria-hidden="true"></span>
    <span class="sr-only">Pending</span>
    <div class="results-message">
      <h3>
        The binding is being created.
      </h3>
      <p class="results-message-details">This may take several minutes.</p>
    </div>
  </div>
  <div ng-if="(ctrl.binding | isBindingReady)">
    <div class="results-status">
      <span class="pficon pficon-ok" aria-hidden="true"></span>
      <span class="sr-only">Success</span>
      <div class="results-message">
        <h3>
          <span ng-if="ctrl.bindType === 'application'">
            <strong>{{ctrl.serviceToBind}}</strong> has been bound to
            <strong>{{ctrl.applicationToBind}}</strong> successfully.
          </span>
          <span ng-if="ctrl.bindType !== 'application'">
            The binding <strong>{{ctrl.binding.metadata.name}}</strong> has been created successfully.
          </span>
        </h3>
        <p class="results-message-details">
          The binding operation created the secret
          <a ng-if="ctrl.secretHref" ng-href="{{ctrl.secretHref}}">{{ctrl.binding.spec.secretName}}</a>
          <span ng-if="!ctrl.secretHref">{{ctrl.binding.spec.secretName}}</span>
          that you may need to reference in your application.
          <span ng-if="ctrl.showPodPresets">Its data will be available to your application as environment variables.</span>
        </p>
      </div>
    </div>
    <div class="alert alert-info results-info" ng-if="ctrl.bindType === 'application'">
      <span class="pficon pficon-info" aria-hidden="true"></span>
      <span class="sr-only">Info</span>
      The binding secret will only be available to new pods. You will need to redeploy your application.
    </div>
  </div>
</div>
<div ng-if="ctrl.error || (ctrl.binding | isBindingFailed)">
  <div class="results-status">
    <span class="pficon pficon-error-circle-o text-danger" aria-hidden="true"></span>
    <span class="sr-only">Error</span>
    <div class="results-message">
      <h3>
        The binding could not be created.
      </h3>
    </div>
  </div>
  <div ng-if="ctrl.error" class="sub-title">
    <span ng-if="ctrl.error.data.message">
      {{ctrl.error.data.message | upperFirst}}
    </span>
    <span ng-if="!ctrl.error.data.message">
      An error occurred creating the binding.
    </span>
  </div>
  <div ng-if="!ctrl.error" class="sub-title">
    {{ctrl.binding | bindingFailedMessage}}
  </div>
</div>
